웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
자바스크립트 라이브러리 제이쿼리의 메소드 중 하나인 contains() 메소드에 대하여 알아보자. 우선 contains() 메소드는 무엇인가? contains() 메소드는 선택한 요소가 특정한 부모요소에 속해 있는지를 확인할 때 사용한다. 즉 특정 요소를 선택하여 부모 요소로 가지는지의 여부를 boolean으로 확인할 수 있는 메소드이다. 이때 반환되는 값은 true, false로 반환한다. 그럼 아래는 contains() 메소드를 사용하는 간단한 방법이다.
$.contains(a, b);
// a는 부모에 해당하는 요소로 자식을 포함시키는 요소
// b는 자식에 해당하는 요소로 부모에 포함되는 요소
# contains() 예제소스 보기
<body>
<div>
<p>Exist!</p>
</div>
<body>
<div>
<p>Exist!</p>
</div>
<body>
만약 위 코드에서 div 태그안에 p태그가 있는지 없는지를 알아볼 경우 어떻게 해야할까? 위 코드는 p 태그의 부모 태그로 div가 존재하고 p는 div의 자식 요소이다. 이를 확인하기 위해 다음과 같은 코드를 사용할 수 있다.
<script>
var isParent = $.contains($('div')[0], $('p')[0]);
// 확인 후 true 및 false를 반환함
// 입력할 값은 배열이 아닌 요소 하나여야함. 즉 div (x) -> div[0] (O)
</script>
var isParent = $.contains($('div')[0], $('p')[0]);
// 확인 후 true 및 false를 반환함
// 입력할 값은 배열이 아닌 요소 하나여야함. 즉 div (x) -> div[0] (O)
</script>
우리는 변수 isParent를 선언하여 참인 경우에 true를 거짓인 경우 false를 반환하게 하였다. 위 예제의 div는 p의 부모요소가 맞으므로 참인 true를 반환할 것으로 예상할 수 있다.
아래의 글도 찾고 계시지 않나요?